[#include "common/html.ftl" /]
[@html]
    [@head title="DB Adminer" css=["fw", "select"] /]
    [@body class="fw-none-bg" style="background-color: rgba(0, 0, 0, .1);"]
        <div class="am-g">
            <div class="am-u-sm-12 select-menu-header">
                <div class="sys_menu">
                     [#if allMenus??]
                        [#list allMenus as sysmenu]
                            <a id="sysmenu-${sysmenu.menuId!}" data-menuid="${sysmenu.menuId!}" data-order="${sysmenu_index+1}" class="sys-menu-a [#if sysMenuId == sysmenu.menuId ]active[/#if]">
                                ${sysmenu.menuName!}
                                <span class="" style="background-image: url(${ctx}/osfw/framework/index/assets/img/bg-${sysmenu_index}.jpg)"></span>
                            </a>
                        [/#list]
                     [/#if]
                </div>
            </div>

            <div class="am-u-sm-12 select-menu-used">
                <div class="wrapper">
                    <div class="cols">
                        <div class="col">
                            <div class="container">
                                <div class="front title">
                                    <div class="inner">
                                        <span class="title title-1">常用</span>
                                        <span class="title title-2">菜单</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        [#if usedMenus??]
                            [#list usedMenus as menu]
                                <div class="col" ontouchstart="this.classList.toggle('hover');">
                                    <div class="container">
                                        <div class="front">
                                            <div class="inner">
                                                <p><span class="${menu.icon!}"></span></p>
                                                <span>${menu.menuName!}</span>
                                            </div>
                                        </div>
                                        <div class="back new-funmenu" data-menuid="${menu.menuId!}" data-menuname="${menu.menuName!}" data-menuurl="${menu.url!}" data-menuicon="${menu.icon!}" data-menutarget="${menu.target!}">
                                            <div class="inner">
                                                <p>点击打开<br/>${menu.menuName!}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            [/#list]
                        [/#if]
                    </div>
                </div>
            </div>

            [#if allMenus??]
                [#list allMenus as sysmenu]
                    <div id="sys-menu-${sysmenu.menuId!}" data-sysmenuid="${sysmenu.menuId!}" class="am-u-sm-12 select-menu-item [#if sysMenuId != sysmenu.menuId ]am-hide[/#if]">
                        <div class="select-menu-item-left">
                            [#if sysmenu.children??]
                                [#list sysmenu.children as menu]
                                    <div id="left-menu-${menu.menuId!}" data-menuid="${menu.menuId!}" class="left-menu-btn [#if menu_index == 0]active[/#if]">
                                        <div class="box [#if menu_index == 0]active[/#if]">
                                            <img src="${ctx}/osfw/framework/select/img/${menu_index}.png">
                                            <div class="box-icon"><i class="${menu.icon!}"></i></div>
                                            <div class="box-title">${menu.menuName!}</div>
                                        </div>
                                    </div>
                                [/#list]
                            [/#if]
                        </div>
                        <div class="select-menu-item-right">
                            [#if sysmenu.children??]
                                [#list sysmenu.children as menu]
                                    [#if menu.target == 'menuCustom-DbConnect'] [#--数据库连接菜单特殊处理--]
                                        <div id="right-menu-${menu.menuId!}" class="cmenu-right-content [#if menu_index != 0]am-hide[/#if]">
                                            <div class="cmenu-right-content1">
                                                <p class="cmenu-right-icon"><i class="${menu.icon!}"></i></p>
                                                <p class="cmenu-right-name">${menu.menuName!}</p>
                                                <p class="cmenu-right-remark">数据库连接维护管理</p>
                                                <p class="cmenu-right-remark">支持数据库库表操作</p>
                                                <p class="cmenu-right-remark">数据库语句执行工具</p>
                                                <p class="cmenu-right-remark">支持大数据快速查询</p>
                                                <p class="cmenu-right-remark">支持数据导入和导出</p>
                                            </div>
                                            <div class="cmenu-right-content2">
                                                <div class="wrapper">
                                                    <div class="cols connects">
                                                        <div id="connect--1" class="col connect" ontouchstart="this.classList.toggle(\'hover\');">
                                                            <div class="container">
                                                                <div class="front">
                                                                    <div class="inner">
                                                                        <p class="title title-default"><span class="am-icon-search-plus"></span></p>
                                                                        <p class="flag"><span class="connect-group-0">[未分组]</span>
                                                                        <p class="name"><span >新建查询</span></p>
                                                                    </div>
                                                                </div>
                                                                <div class="back new-sqlexcute" data-connect_id="-1" data-connect_name="--" data-connect_group="0">
                                                                    <div class="inner">
                                                                        <p>点击打开<br/>新建查询<br/>SQL执行编辑器</p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    [#else ]
                                        <div id="right-menu-${menu.menuId!}" class="cmenu-right-content [#if menu_index != 0]am-hide[/#if]">
                                            <div class="cmenu-right-content1">
                                                <p class="cmenu-right-icon"><i class="${menu.icon!}"></i></p>
                                                <p class="cmenu-right-name">${menu.menuName!}</p>
                                                [#if menu.children??]
                                                    [#list menu.children as cmenu]
                                                        [#if cmenu_index < 5 ]
                                                            <p class="cmenu-right-remark am-ellipsis">${cmenu.remark!}</p>
                                                        [#elseif cmenu_index == 5 ]
                                                            <p class="cmenu-right-remark am-ellipsis" style="letter-spacing: 5px;">......</p>
                                                        [/#if]
                                                    [/#list]
                                                [/#if]
                                            </div>
                                            <div class="cmenu-right-content2">
                                                <div class="wrapper">
                                                    <div class="cols">
                                                        [#if menu.children??]
                                                            [#list menu.children as cmenu]
                                                                <div class="col" ontouchstart="this.classList.toggle('hover');">
                                                                    <div class="container">
                                                                        <div class="front">
                                                                            <div class="inner">
                                                                                <p><span class="${cmenu.icon!}"></span></p>
                                                                                <span>${cmenu.menuName!}</span>
                                                                            </div>
                                                                        </div>
                                                                        <div class="back new-funmenu" data-menuid="${cmenu.menuId!}" data-menuname="${cmenu.menuName!}" data-menuurl="${cmenu.url!}" data-menuicon="${cmenu.icon!}" data-menutarget="${cmenu.target!}">
                                                                            <div class="inner">
                                                                                <p>点击打开<br/>${cmenu.menuName!}</p>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            [/#list]
                                                        [/#if]
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    [/#if]
                                [/#list]
                            [/#if]
                        </div>
                    </div>
                [/#list]
            [/#if]
        </div>

        [@script js=["fw", "select"] ]
            <!-- 自定义js -->
            <script type="text/javascript">
                $(function () {
                    initDbConnect();
                });
                function initDbConnect() {
                    $.ajax({
                        type: "get",
                        async: false,
                        url: ctx + "osfw/dbadminer/connect/list",
                        success: function (res) {
                            if (res.code == web_status.SUCCESS && res.data != null) {
                                var connects = res.data;
                                for (var j = 0; j < connects.length; j++) {
                                    var connect = connects[j];
                                    var connectMenu =
                                        '<div id="connect-' + connect.id + '" class="col connect" ontouchstart="this.classList.toggle(\'hover\');">' +
                                        '   <div class="container">' +
                                        '       <div class="front">' +
                                        '           <div class="inner">' +
                                        '               <p class="title"><span class="icon-' + connect.type + '"></span></p>' +
                                        '               <p class="flag"><span class="connect-group-' + ($.common.isEmpty(connect.groupFlag) ? '0' : connect.groupFlag) + '">[' + connect.groupName + ']</span>' +
                                        '               <p class="name"><span >' + connect.name + '</span></p>' +
                                        '           </div>' +
                                        '       </div>' +
                                        '       <div class="back new-sqlexcute" data-connect_id="' + connect.id + '" data-connect_name="' + connect.name + '" data-connect_group="' + connect.groupFlag + '">' +
                                        '           <div class="inner">' +
                                        '               <p>点击打开<br/>' + connect.name + '<br/>SQL执行编辑器</p>' +
                                        '           </div>' +
                                        '       </div>' +
                                        '   </div>'
                                        '</div>';
                                    $(".connects").append(connectMenu);
                                }
                            }
                        },
                        error: function (xhr, status, error) {
                            var errorMessage = "请求失败，请稍后再试。";
                            if (xhr.status === 0) {
                                errorMessage = "网络连接失败，请检查网络设置。";
                            } else if (xhr.status === 404) {
                                errorMessage = "请求的资源不存在。";
                            } else if (xhr.status === 500) {
                                // var responseText = JSON.parse(xhr.responseText);
                                errorMessage = "服务器异常，请联系技术人员。";
                            } else if (error === "timeout") {
                                errorMessage = "请求超时，请稍后再试。";
                            }
                            // 显示错误提示给用户
                            console.error(errorMessage);
                        }
                    });
                }
            </script>
        [/@script]
    [/@body]
[/@html]